<template>
  <div>
    <ul class="nav">
      <li>
        <router-link :to="{ path: '/shouye' }">
          <div>
            <img src="./assets/images/首页.png" alt=""><br>
            首页
          </div>
        </router-link>
      </li>
      <li>
        <div>
            <img src="./assets/images/盒马小镇.png" alt=""><br>
            盒马小镇
          </div>
      </li>
      <li>
        <router-link :to="{ path: '/release' }">
          <div>
            <img src="./assets/images/吃什么.png" alt=""><br>
            吃什么
          </div>
        </router-link>
      </li>
      <li>
        <router-link :to="{ path: '/car' }">
          <div>
            <img src="./assets/images/购物车.png" alt=""><br>
            购物车
          </div>
        </router-link>
      </li>
      <li>
        <router-link :to="{ path: '/personal' }">
          <div>
            <img src="./assets/images/我的.png" alt=""><br>
            我的
          </div>
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  }
});
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav{
  background-color: #FFFFFF;
  list-style: none;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85px;
  justify-content: space-around;
  li{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    img{
      width: 35px;
      height: 35px;
    }

    a{
      text-decoration: none;
      color: #555555;
    }
  }
}
</style>
